<div class="row alerts-container" data-ng-controller="AlertsCtrl" data-ng-show="alerts.length">
  <div class="col-xs-12">
    <alert data-ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
  </div>
</div>

<div class="row">
    <div class="col-lg-3 col-md-6 col-xs-12">
        <widget>
            <widget-body>
                <div class="widget-icon green pull-left">
                    <i class="fa fa-users"></i>
                </div>
                <div class="title">80</div>
                <div class="comment">Users</div>
            </widget-body>
        </widget>
    </div>
    <div class="col-lg-3 col-md-6 col-xs-12">
        <widget>
            <widget-body>
                <div class="widget-icon red pull-left">
                    <i class="fa fa-tasks"></i>
                </div>
                <div class="title">16</div>
                <div class="comment">Servers</div>
            </widget-body>
        </widget>
    </div>
    <div class="col-lg-3 col-md-6 col-xs-12">
        <widget>
            <widget-body>
                <div class="widget-icon orange pull-left">
                    <i class="fa fa-sitemap"></i>
                </div>
                <div class="title">225</div>
                <div class="comment">Documents</div>
            </widget-body>
        </widget>
    </div>
    <div class="col-lg-3 col-md-6 col-xs-12">
        <widget>
            <widget-body>
                <div class="widget-icon blue pull-left">
                    <i class="fa fa-support"></i>
                </div>
                <div class="title">62</div>
                <div class="comment">Tickets</div>
            </widget-body>
        </widget>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <widget>
            <widget-header icon="fa-tasks" title="Servers">
                <a href="#">Manage</a>
            </widget-header>
            <widget-body classes="medium no-padding">
                <div class="table-responsive">
                    <table class="table">
                        <tbody>
                            <tr><td>RDVMPC001</td><td>238.103.133.37</td><td><span class="text-success"><i class="fa fa-check"></i></span></td></tr>
                            <tr><td>RDVMPC002</td><td>68.66.63.170</td><td><span class="text-success"><i class="fa fa-check"></i></span></td></tr>
                            <tr><td>RDVMPC003</td><td>76.117.212.33</td><td><span tooltip="Server Down!" class="text-danger"><i class="fa fa-warning"></i></span></td></tr>
                        </tbody>
                    </table>
                </div>
            </widget-body>
        </widget>
    </div>
    <div class="col-lg-6">
        <widget>
            <widget-header icon="fa-users" title="Users">
                <input type="text" placeholder="Search" class="form-control input-sm" />
            </widget-header>
            <widget-body classes="medium no-padding">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr><th class="text-center">ID</th><th>Username</th><th>Role</th><th>Account</th></tr>
                        </thead>
                        <tbody>
                            <tr><td class="text-center">1</td><td>Joe Bloggs</td><td>Super Admin</td><td>AZ23045</td></tr>
                            <tr><td class="text-center">2</td><td>Timothy Hernandez</td><td>Admin</td><td>AU24783</td></tr>
                        </tbody>
                    </table>
                </div>
            </widget-body>
        <widget>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <widget>
            <widget-header icon="fa-plus" title="Extras">
                <button class="btn btn-sm btn-info">Button</button>
            </widget-header>
            <widget-body>
                <div class="message">
                    This is a standard message which will also work the ".no-padding" class, I can also <span class="error">be an error message!</span>
                </div>
                <hr />
                <div class="message">
                    <a href="http://angular-ui.github.io/bootstrap/" target="_blank">UI Bootstrap</a> is included, so you can use <a href="#" tooltip="I'm a tooltip!">tooltips</a> and all of the other native Bootstrap JS components!
                </div>
            </widget-body>
        </widget>
    </div>
    <div class="col-lg-6">
        <widget>
            <widget-header icon="fa-cog fa-spin" title="Loading Directive">
                <a href="http://tobiasahlin.com/spinkit/" target="_blank">SpinKit</a>
            </widget-header>
            <widget-body>
                <loading></loading>
            </widget-body>
        </widget>
    </div>
</div>